<template>
  <div class="app-container">
    <div class="equipment_status">
      <div class="status_num">
        <img alt="" src="@/assets/logo/deviceManagement.gif"/>
        <p>
          ：
          <span style="color: #71e2a3">{{ onlineCount }}</span
          >/ <span style="color: #ff9292">{{ offlineCount }}</span
        >/ <span style="color: #eeb422">{{ initCount }}</span
        >/
          <span>{{ total }}</span>
        </p>
      </div>
      <div class="status">
        <p>设备状态：</p>
        <span style="color: #71e2a3">在线/</span>
        <span style="color: #ff9292">离线/</span>
        <span style="color: #ffba00">未连接/</span>
        <span>全部</span>
      </div>
      <div class="Mqtt">
        <p :key="dict.value" v-for="dict in dict.type.link_device_connector">
          MQTT连接地址：
          <i @click="copy(dict.label)"
             class="el-icon-copy-document"
             style="cursor: pointer"
             title="复制"></i>
          <span>{{ dict.label }}</span>
        </p>
      </div>
      <div class="zhengshu">
        <p>
          SSL证书：
          <a href="#" style="color: #357df5">下载SSL证书</a>
        </p>
        <p>
          <span>二次开发：</span>
          <a href="#" style="color: #357df5; margin-right: 20px">下载Demo</a>
          <a href="https://bbs.csdn.net/forums/thingiots"
             style="color: #357df5"
             target="_blank">开发文档</a>
        </p>
      </div>
    </div>
    <el-form
      :inline="true"
      :model="queryParams"
      label-width="100px"
      ref="queryForm"
      v-show="showSearch"
    >
      <el-form-item label="客户端标识" prop="clientId">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入客户端标识"
          size="small"
          v-model="queryParams.clientId"
        />
      </el-form-item>
      <el-form-item label="设备标识" prop="deviceIdentification">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入设备标识"
          size="small"
          v-model="queryParams.deviceIdentification"
        />
      </el-form-item>
      <el-form-item label="设备名称" prop="deviceName">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入设备名称"
          size="small"
          v-model="queryParams.deviceName"
        />
      </el-form-item>
      <el-form-item label="连接实例" prop="connector" v-if="advancedSearch">
        <el-select
          clearable
          placeholder="请选择连接实例"
          size="small"
          v-model="queryParams.connector"
        >
          <el-option
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            v-for="dict in dict.type.link_device_connector"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" prop="deviceStatus" v-if="advancedSearch">
        <el-select
          clearable
          placeholder="请选择设备状态"
          size="small"
          v-model="queryParams.deviceStatus"
        >
          <el-option
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            v-for="dict in dict.type.link_device_status"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="连接状态" prop="connectStatus" v-if="advancedSearch">
        <el-select
          clearable
          placeholder="请选择连接状态"
          size="small"
          v-model="queryParams.connectStatus"
        >
          <el-option
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            v-for="dict in dict.type.link_device_connect_status"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否遗言" prop="isWill" v-if="advancedSearch">
        <el-select
          clearable
          placeholder="请选择是否遗言"
          size="small"
          v-model="queryParams.isWill"
        >
          <el-option
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            v-for="dict in dict.type.link_device_is_will"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备标签" prop="deviceTags" v-if="advancedSearch">
        <el-input
          @keyup.enter.native="handleQuery"
          clearable
          placeholder="请输入设备标签"
          size="small"
          v-model="queryParams.deviceTags"
        />
      </el-form-item>
      <el-form-item
        label="产品标识"
        prop="productIdentification"
        v-if="advancedSearch"
      >
        <el-select
          placeholder="请选择产品标识"
          v-model="form.productIdentification"
        >
          <el-option
            :disabled="item.status === 0"
            :key="item.productIdentification"
            :label="item.productName"
            :value="item.productIdentification"
            @keyup.enter.native="handleQuery"
            v-for="item in productOptions"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="协议类型" prop="protocolType" v-if="advancedSearch">
        <el-select
          clearable
          placeholder="请选择协议类型"
          size="small"
          v-model="queryParams.protocolType"
        >
          <el-option
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            v-for="dict in dict.type.link_device_protocol_type"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型" prop="deviceType" v-if="advancedSearch">
        <el-select
          clearable
          placeholder="请选择设备类型"
          size="small"
          v-model="queryParams.deviceType"
        >
          <el-option
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
            v-for="dict in dict.type.link_device_device_type"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="handleQuery"
          icon="el-icon-search"
          size="mini"
          type="primary"
        >搜索
        </el-button
        >
        <el-button @click="resetQuery" icon="el-icon-refresh" size="mini"
        >重置
        </el-button
        >
        <el-button
          :icon="icon"
          @click="advancedSearch_toggle($event)"
          size="mini"
        >高级搜索
        </el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          @click="handleAdd"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          v-hasPermi="['iot:device:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="multiple"
          @click="handleDelete"
          icon="el-icon-delete"
          plain
          size="mini"
          type="danger"
          v-hasPermi="['iot:device:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          :disabled="multiple"
          @click="handleDisconnect"
          icon="el-icon-loading"
          plain
          size="mini"
          type="danger"
          v-hasPermi="['iot:device:disconnect']"
        >断开连接
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          @click="handleExport"
          icon="el-icon-download"
          plain
          size="mini"
          type="warning"
          v-hasPermi="['iot:device:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table border :data="deviceList" @selection-change="handleSelectionChange" v-loading="loading">
      <el-table-column align="center" type="selection" width="50"/>
      <el-table-column align="center" label="id" prop="id" v-if="false"/>
      <el-table-column align="center" label="设备标识" prop="deviceIdentification" width="180"/>
      <el-table-column align="center" label="客户端标识" prop="clientId" width="180"/>
      <el-table-column align="center" label="用户名" prop="userName" width="180"/>
      <el-table-column align="center" label="密码" prop="password" width="180">
        <template slot-scope="scope">
          <div disable="disable"
            style="width: 100%;display: flex;justify-content: center;align-items: center;">
            <i @click="copy(deviceList[scope.$index].password)"
              class="el-icon-copy-document"
              style="cursor: pointer"
              title="复制"></i>
            <span ref="start" v-show="currentIndex !== scope.$index">********</span>
            <span ref="pWord" v-show="currentIndex === scope.$index">{{
              deviceList[scope.$index].password
            }}</span>
            <i :ind="scope.$index"
               @click="setShow(scope.$index, $event)"
               class="el-icon-view"
               style="cursor: pointer"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备状态" prop="deviceStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.link_device_status"
                    :value="scope.row.deviceStatus"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="连接状态" prop="connectStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.link_device_connect_status"
                    :value="scope.row.connectStatus"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称" prop="deviceName" width="180"/>
      <el-table-column align="center" label="设备类型" prop="deviceType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.link_device_device_type"
            :value="scope.row.deviceType"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属产品" prop="productIdentification" width="180"/>
      <el-table-column show-overflow-tooltip align="center" label="连接实例" prop="connector" width="180"/>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <span style="margin-right: 10px">
            <el-tooltip
              class="item"
              content="修改"
              effect="light"
              placement="top">
              <el-button
                @click="handleUpdate(scope.row)"
                circle
                icon="el-icon-edit"
                size="mini"
                type="primary"
                v-hasPermi="['iot:device:edit']"
              ></el-button>
            </el-tooltip>
          </span>
          <span style="margin-right: 10px">
            <el-tooltip
              class="item"
              content="删除"
              effect="light"
              placement="top">
              <el-button
                @click="handleDelete(scope.row)"
                circle
                icon="el-icon-delete"
                size="mini"
                type="primary"
                v-hasPermi="['iot:device:remove']"
              ></el-button>
            </el-tooltip>
          </span>
          <span style="margin-right: 10px">
            <el-tooltip
              class="item"
              content="设备详情"
              effect="light"
              placement="top"
            >
              <el-button
                @click="handleDeviceDetail(scope.row)"
                circle
                icon="el-icon-s-operation"
                size="mini"
                type="primary"
                v-hasPermi="['iot:device:detail']"
              ></el-button>
            </el-tooltip>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
      v-show="total > 0"
    />

    <!-- 添加或修改设备档案对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="open"
      @closed="closed"
      @opened="opened"
      append-to-body
      width="40%">
      <el-form :model="form" :rules="rules" label-width="120px" ref="form">
        <el-row>
          <el-col :span="11">
            <el-form-item label="客户端标识" prop="clientId">
              <el-input
                @keyup.native="clientId"
                placeholder="请输入客户端标识"
                v-model="form.clientId"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="用户名" prop="userName">
              <el-input placeholder="请输入用户名" v-model="form.userName"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="密码" prop="password">
              <el-input
                placeholder="请输入密码"
                show-password
                type="password"
                v-model="form.password"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="认证方式" prop="authMode">
              <el-select placeholder="请选择认证方式" v-model="form.authMode">
                <el-option
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                  v-for="dict in dict.type.link_device_auth_mode"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="所属产品" prop="productIdentification">
              <el-select
                :disabled="set ? true : false"
                placeholder="请选择所属产品"
                v-model="form.productIdentification">
                <el-option
                  :disabled="item.status === 0"
                  :key="item.productIdentification"
                  :label="item.productName"
                  :value="item.productIdentification"
                  v-for="item in productOptions"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="连接实例" prop="connector">
              <el-select placeholder="请选择连接实例" v-model="form.connector">
                <el-option
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                  v-for="dict in dict.type.link_device_connector"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input
                placeholder="请输入设备名称"
                v-model="form.deviceName"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备标识" prop="deviceIdentification">
              <el-input
                :disabled="set ? true : false"
                @keyup.native="deviceIdentification"
                placeholder="请输入设备标识"
                v-model="form.deviceIdentification"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="设备描述" prop="deviceDescription">
              <el-input
                placeholder="请输入设备描述"
                v-model="form.deviceDescription"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="设备标签" prop="deviceTags">
              <el-input
                placeholder="请输入设备标签"
                v-model="form.deviceTags"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="设备状态" prop="deviceStatus">
              <el-select
                placeholder="请选择设备状态"
                v-model="form.deviceStatus">
                <el-option
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                  v-for="dict in dict.type.link_device_status"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
          </el-col>
        </el-row>
        <el-row style="display: flex; justify-content: center">
          <el-col :span="24">
            <mapView
              @locationAddress="locationAddress"
              @locationChange="locationChange"
              @locationFail="locationFail"
              ref="mapView"
            >
            </mapView>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注" prop="remark">
              <el-input
                placeholder="请输入内容"
                type="textarea"
                v-model="form.remark"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button
          :disabled="
            check.clientId && check.deviceIdentification ? false : true
          "
          @click="submitForm"
          type="primary"
        >确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listDevice,
    listStatusCount,
    getDevice,
    delDevice,
    addDevice,
    updateDevice,
    disconnectDevice,
    validationDeviceIdentification_clientId,
    validationDeviceIdentification_deviceIdentification,
  } from "@/api/iot/device";
  import {listProduct} from "@/api/iot/product";
  import mapView from "./mapView";

  export default {
    components: {mapView},
    props: ["appId", "productIdentification"],
    name: "Device",
    dicts: [
      "link_device_status",
      "link_device_connect_status",
      "link_device_protocol_type",
      "link_device_device_type",
      "link_device_auth_mode",
      "link_device_connector",
      "link_device_is_will",
      "link_application_type",
    ],
    data() {
      return {
        productOptions: [],
        //密码显示隐藏
        show: true,
        currentIndex: null,
        // 高级搜索切换
        advancedSearch: false,
        // 高级搜索icon
        icon: "el-icon-arrow-down",
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 设备档案表格数据
        deviceList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          clientId: null,
          deviceIdentification: null,
          deviceName: null,
          connector: null,
          deviceStatus: null,
          connectStatus: null,
          isWill: null,
          deviceTags: null,
          productIdentification: null,
          protocolType: null,
          deviceType: null,
        },
        // 表单参数
        form: {},
        deviceLocation: {
          latitude: null,
          longitude: null,
        },
        // 表单校验
        rules: {
          clientId: [
            {required: true, message: "客户端标识不能为空", trigger: "blur"},
            { min: 2, max: 50, message: '长度必须介于 2 和 50 之间', trigger: 'blur' },
            {
              pattern: /^[a-zA-Z0-9_]+$/,
              message: "英文大小写、数字、下划线",
              trigger: "blur"
            }
          ],
          userName: [
            {required: true, message: "用户名不能为空", trigger: "blur"},
          ],
          password: [
            {required: true, message: "密码不能为空", trigger: "blur"},
          ],
          authMode: [
            {required: true, message: "认证方式不能为空", trigger: "change"},
          ],
          deviceIdentification: [
            {required: true, message: "设备标识不能为空", trigger: "blur"},
            { min: 2, max: 50, message: '长度必须介于 2 和 50 之间', trigger: 'blur' },
            {
              pattern: /^[a-zA-Z0-9_]+$/,
              message: "英文大小写、数字、下划线",
              trigger: "blur"
            }
          ],
          deviceName: [
            {required: true, message: "设备名称不能为空", trigger: "blur"},
          ],
          connector: [
            {required: true, message: "连接实例不能为空", trigger: "change"},
          ],
          deviceStatus: [
            {required: true, message: "设备状态不能为空", trigger: "change"},
          ],
          productIdentification: [
            {required: true, message: "产品标识不能为空", trigger: "blur"},
            { min: 2, max: 50, message: '长度必须介于 2 和 50 之间', trigger: 'blur' },
            {
              pattern: /^[a-zA-Z0-9_]+$/,
              message: "英文大小写、数字、下划线",
              trigger: "blur"
            }
          ],
        },
        onlineCount: 0, //在线设备
        offlineCount: 0, //离线设备
        initCount: 0, //未连接设备
        set: false, //修改禁用标识
        check: {
          clientId: false,
          deviceIdentification: false,
        },
        //经纬度信息
        lonLat: [],
      };
    },
    watch: {
      appId(newval, oldval) {
        if (newval !== oldval) {
          this.queryParams.appId = newval;
          this.getList();
        }
      },
      productIdentification(newval, oldval) {
        if (newval !== oldval) {
          this.queryParams.productIdentification = newval;
          this.getList();
        }
      },
    },
    created() {
      if (this.appId) this.queryParams.appId = this.appId;
      if (this.productId) this.queryParams.productId = this.productId;
      this.getList();
      this.getStatusCount();
      listProduct({
        pageNum: 1,
        pageSize: 10,
      }).then((response) => {
        this.productOptions = response.rows;
      });
    },
    methods: {
      opened() {
        if (this.form.id !== null) {
          this.$nextTick(() => {
            this.$refs.mapView.TheMap(this.lonLat.join(","));
          });
        } else {
          this.$nextTick(() => {
            this.$refs.mapView.TheMap();
          });
        }
      },
      closed() {
        this.reset();
        this.$refs.mapView.TheMap();
        this.$refs.mapView.address = "";
      },
      //客户端标识校验
      clientId() {
        if (!this.form.clientId){
          return;
        }
        validationDeviceIdentification_clientId(this.form.clientId).then(
          (res) => {
            if (res.code === 200) {
              this.check.clientId = true;
              /*
              this.$message({
                message: "客户端标识校验通过",
                type: "success",
              });*/
            }
          }
        );
      },
      //设备标识校验
      deviceIdentification() {
        if (!this.form.deviceIdentification){
          return;
        }
        validationDeviceIdentification_deviceIdentification(
          this.form.deviceIdentification
        ).then((res) => {
          if (res.code === 200) {
            this.check.deviceIdentification = true;
            /*
            this.$message({
              message: "设备标识校验通过",
              type: "success",
            });*/
          }
        });
      },
      //显示隐藏
      setShow(index) {
        if (this.show) {
          this.currentIndex = index;
          this.show = false;
        } else {
          this.currentIndex = null;
          this.show = true;
        }
      },
      // 复制
      copy(shareiot) {
        var input = document.createElement("input");
        input.value = shareiot;
        document.body.appendChild(input);
        input.select();
        document.execCommand("Copy");
        document.body.removeChild(input);
        this.$message({
          message: "复制成功",
          type: "success",
        });
      },
      // 高级搜索切换显示隐藏
      advancedSearch_toggle() {
        this.advancedSearch = !this.advancedSearch;
        // 切換icon
        if (this.advancedSearch) {
          this.icon = "el-icon-arrow-up";
        } else {
          this.icon = "el-icon-arrow-down";
        }
      },
      locationChange(e) {
        this.deviceLocation.longitude = e[0] * 1;
        this.deviceLocation.latitude = e[1] * 1;
      },
      locationAddress(e) {
        console.log(e);
        this.deviceLocation.provinceCode = e.addressComponent.adcode;
        this.deviceLocation.cityCode = e.addressComponent.citycode;
        this.deviceLocation.regionCode = e.addressComponent.district;
        this.deviceLocation.fullName = e.formattedAddress;
      },
      locationFail(message) {
        this.$message({
          message: message,
          type: "warning",
          duration: 1500,
        });
      },
      /** 查询设备档案列表 */
      getList() {
        this.loading = true;
        listDevice(this.queryParams).then((response) => {
          this.deviceList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      getStatusCount() {
        listStatusCount().then((response) => {
          this.onlineCount = response.data.onlineCount;
          this.offlineCount = response.data.offlineCount;
          this.initCount = response.data.initCount;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          clientId: null,
          userName: null,
          password: null,
          appId: null,
          authMode: null,
          deviceIdentification: null,
          deviceName: null,
          connector: null,
          deviceDescription: null,
          deviceStatus: null,
          connectStatus: null,
          isWill: null,
          deviceTags: null,
          productIdentification: null,
          protocolType: null,
          deviceType: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
        };
        this.deviceLocation = {
          latitude: null,
          longitude: null,
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.check = {
          clientId: false,
          deviceIdentification: false,
        };
        this.reset();
        this.form.appId = this.appId;
        // if (this.appId)
        //   this.changeApp(this.appId);
        this.form.productIdentification = this.productIdentification;
        this.set = false;
        this.open = true;
        this.title = "添加设备档案";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.check = {
          clientId: true,
          deviceIdentification: true,
        };
        this.reset();
        this.set = true;
        const id = row.id || this.ids;
        getDevice(id).then((response) => {
          this.form = response.data;
          if (response.data.location !== null) {
            this.lonLat = [
              response.data.location.longitude,
              response.data.location.latitude,
            ];
          } else {
            this.lonLat = [];
          }
          this.open = true;
          this.title = "修改设备档案";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              this.deviceLocation.deviceIdentification =
                this.form.deviceIdentification;
              this.deviceLocation.id = this.form.location.id;
              this.form.deviceLocation = this.deviceLocation;
              console.log(this.form);
              updateDevice(this.form).then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              this.deviceLocation.deviceIdentification =
                this.form.deviceIdentification;
              this.deviceLocation.id = this.form.id;
              this.form.deviceLocation = this.deviceLocation;
              console.log(this.form);
              addDevice(this.form).then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal
          .confirm('是否确认删除设备档案编号为"' + ids + '"的数据项？')
          .then(function () {
            return delDevice(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {
          });
      },
      /** 断开连接按钮操作 */
      handleDisconnect(row) {
        const ids = row.id || this.ids;
        this.$modal
          .confirm('是否确认断开连接设备档案编号为"' + ids + '"的数据项？')
          .then(function () {
            return disconnectDevice(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("操作成功");
          })
          .catch(() => {
          });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "link/device/export",
          {
            ...this.queryParams,
          },
          `link_device.xlsx`
        );
      },
      handleDeviceDetail: function (row) {
        const deviceId = row.id;
        this.$router.push("/iot/device-detail/device/" + deviceId);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .equipment_status {
    width: 100%;
    margin: 0 0 10px 10px;
    padding: 20px 30px;
    background: #f8f8f9;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    font-weight: 700;
    color: #515a6e;
  }

  .equipment_status .status_num {
    width: 20%;
    display: flex;
    font-size: 18px;
    align-items: center;

    img {
      width: 30%;
    }
  }

  .equipment_status .status {
    width: 20%;
    display: flex;
    align-items: center;
  }

  .inputDeep {
    border: 0 !important;
  }
</style>
